<template>
  <!-- <div
    class="container"
    :style="{ display: value ? 'block' : 'none' }"
    @click="clickMask"
  > -->
  <div
    class="container"
    :style="{ display: show ? 'block' : 'none' }"
    @click="clickMask"
  >
    <div
      class="content"
      @click.stop=""
      :style="{
        width: width + 'px',
        height: height + 'px',
        'z-index': 999,
        background: 'red'
      }"
    >
      <div class="title">
        <slot name="title"></slot>
      </div>
      <div class="center">
        <slot></slot>
      </div>
      <div class="footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
      default: 600
    },
    height: {
      type: Number,
      default: 400
    },
    // value: {
    //   type: Boolean,
    //   default: false
    // },
    show: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    clickMask () {
      // this.$emit('input', false)
      this.$emit('update:show', false)
    }
  }
}
</script>

<style>
.container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(127, 127, 127, 0.5);
}

.content {
  margin: 50px auto;
  display: flex;
  flex-direction: column;
}

.content .title {
  height: 60px;
  width: 100%;
}

.content .center {
  flex: 1;
  width: 100%;
  text-align: center;
}

.content .footer {
  height: 100px;
  margin-top: 10px;
  width: 100%;
  text-align: right;
}
</style>
